<template>
  <div>
    <div v-if="cartsNum!=0">
      <div class="cartContent" v-for="(cart,index) in cart">
        <div class="left">
          <img v-lazy.container="`http://localhost:3000/${cart.img[0].filename}`" class="left"/>
        </div>
        <div class="center">
          <p>{{cart.name}}</p>
        </div>
        <div class="right">
          <p>¥{{cart.price}}</p>
          <p>x{{cart.num}}</p>
        </div>
      </div> 
      <div class="total">
        <p>共：<span class="colorRed">{{cartsNum}}</span>件</p>
        <p>总计：<span  class="colorRed">¥{{totalMoney}}</span></p>
        <mt-button type="danger">去结算</mt-button>
      </div>
    </div>
    <div v-else class="none">
      <div>
        <i class="iconfont icon-cart"></i>
      </div>
      <p>购物车没有商品哦，<router-link to='/product'>去逛逛~</router-link></p>
    </div>
  </div>
</template>
<script>
 import {mapGetters,mapActions} from 'vuex';
  export default {
    data(){
      return{

      }
    },
    computed: {
        ...mapGetters(['cart','totalMoney','cartsNum']),
    },
    methods:{
        ...mapActions(['getAddCart']),
    },
    created(){

    }
  }
</script>
<style>
  .cartContent{overflow:hidden;border-bottom:1px solid #ccc}
  .cartContent .left{width:20%}
  .cartContent .left img{width:100%}
  .cartContent .center{width:60%;float:left;margin-top:5px}
  .cartContent .right{width:20%;text-align:right}
  .cartContent .price{color:red;padding-left:5px;}
  .cartContent .name{padding:5px;}
  .total p{text-align:right}
  .colorRed{color:#f40}
  .none{text-align:center;color:#999;}
  .none i{font-size:58px;}
  .none a{color:#999;}
</style>